<!--
 * @Description: 
 * @Version: 2.0
 * @Author: Xing
 * @Date: 2020-12-09 09:40:40
 * @LastEditors: Xing
 * @LastEditTime: 2020-12-11 16:22:38
-->
<template>
  <div class="Header-container">
    <div class="left-box">
      <div class="user-name">6666</div>
      <div class="tip">人生苦短</div>
    </div>
    <div class="right-box">
      <div class="right-item">
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2422513129,1128807829&fm=26&gp=0.jpg" alt="" srcset="" />
        <span>首页</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.Header-container {
  height: 50px;
  width: 100%;
  background-color: #f1a4c7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 200px;
  box-sizing: border-box;
  .left-box {
    display: flex;
    align-items: center;
    .user-name {
      color: #f35626;
      font-family: 微软雅黑;
      background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-animation: hue 10s infinite linear;
      font-size: 20px;
    }
    @-webkit-keyframes hue {
      from {
        -webkit-filter: hue-rotate(0deg);
        -moz-filter: hue-rotate(0deg);
      }
      to {
        -webkit-filter: hue-rotate(-360deg);
        -moz-filter: hue-rotate(-360deg);
      }
    }
    .tip {
      color: #333;
      margin-left: 10px;
    }
  }
  .right-box {
    .right-item {
      display: flex;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }
}
</style>
